<template>
  <view class="dy-scroll-container">
    <dy-navbar title="分割线" />
    <scroll-view class="dy-scroll" scroll-y="">
      <view class="dy-content">
        <dy-section>基础示例</dy-section>
        <dy-divider>标题</dy-divider>
        <dy-divider :custom-style="{ margin: '20rpx 0' }">
          <p>
            ------
            <br />
            内容
            <br />
            ------
          </p>
        </dy-divider>
        <dy-section>分割线颜色</dy-section>
        <dy-divider
          border-color="#ff5500"
          content-position="left"
          :custom-style="{ margin: '48rpx 0' }"
        >
          #FF5500
        </dy-divider>
        <dy-divider
          border-color="#0b65d1"
          content-position="left"
          :custom-style="{ margin: '48rpx 0' }"
        >
          #0B65D1
        </dy-divider>
        <dy-divider
          border-color="#e02020"
          content-position="left"
          :custom-style="{ margin: '48rpx 0' }"
        >
          #E02020
        </dy-divider>

        <dy-section>插槽位置</dy-section>
        <dy-divider content-position="left" :custom-style="{ margin: '48rpx 0' }">
          content left
        </dy-divider>
        <dy-divider content-position="center" :custom-style="{ margin: '48rpx 0' }">
          content center
        </dy-divider>
        <dy-divider content-position="right" :custom-style="{ margin: '48rpx 0' }">
          content right
        </dy-divider>

        <dy-section>分割线样式</dy-section>
        <dy-divider
          :halfline="false"
          border-style="dashed"
          content-position="left"
          :custom-style="{ margin: '48rpx 0' }"
        >
          dashed
        </dy-divider>
        <dy-divider
          :halfline="false"
          border-style="dotted"
          content-position="left"
          :custom-style="{ margin: '48rpx 0' }"
        >
          dotted
        </dy-divider>
        <dy-divider
          :halfline="false"
          border-style="groove"
          content-position="left"
          :custom-style="{ margin: '48rpx 0' }"
        >
          groove
        </dy-divider>
        <dy-section>自定义样式</dy-section>
        <dy-divider border-color="#ff508a" :custom-style="{ margin: '48rpx 0' }">
          <view class="dy-fz-48 dy-fw-500 dy-gray">自定义分割线</view>
        </dy-divider>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'Search'
}
</script>

<style></style>
